<template>
	<div class="close">
		<van-pull-refresh
			v-model="refreshing"
			@refresh="twoOnRefresh"
			:loosing-text="$t('pages.home.releaseToRefresh', '释放即可刷新...')"
			:loading-text="$t('pages.home.loading', '加载中...')"
			:pulling-text="$t('pages.home.pullDownRefresh', '下拉即可刷新...')"
		>
			<ZeroData v-if="!props.getEndLi?.length && !refreshing && !loading" />
			<van-list
				v-model:loading="loading"
				:finished="finished"
				:loading-text="$t('pages.home.loading', '加载中...')"
				:finished-text="$t('pages.home.noMore', '没有更多了')"
				@load="onLoad"
				v-else
			>
				<UACard :close="true" v-for="i in props.getEndLi" :key="i" :value="i" />
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import UACard from './UACard.vue'
import ZeroData from './zeroData.vue'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
const props = defineProps(['getEndLi'])
const emits = defineEmits(['getNewEndLi', 'Refresh'])
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const twoOnRefresh = () => {
	emits('Refresh')
}
const onLoad = () => {
	emits('getNewEndLi')
}
defineExpose({ refreshing, loading, finished })
</script>

<style lang="less" scoped>
.close {
	overflow: scroll;
	height: calc(100vh - 140px);
}
.van-list {
	min-height: 80vh;
	padding-bottom: 80px;
	animation: aaa 0.3s forwards ease-in-out;
}
@keyframes aaa {
	0% {
		margin-top: -60px;
	}
	100% {
		margin-top: 0;
	}
}
</style>
